Using HomeSite
Chapter 6  Editing Pages

Using the Tag Tree and Tag Inspector

The Tag Inspector panel of the Resources window contains two integrated tools: the Tag Tree and the Tag Inspector. By using them in combination, you can edit all the code in a document without having to work directly in the document.

Navigating a document structure in the Tag Tree

The Tag Tree, located in the top pane, is helpful for inspecting and navigating a document's structure. It can be easily configured to display just the tags you want.

To use the Tag Tree:

1. Open the drop-down list at the top of the pane to select an Outline Profile.

   Profiles let you restrict the outline display to specific tag sets. This can be very useful when you need to be aware of mixed language elements and language versions in your documents.

2. Click on a tag in the tree to quickly locate it in the document. Press Shift+Ctrl and double-click to select the entire tag block.

   If the selected tag supports attributes, they are displayed, with their values, in the Tag Inspector pane.

3. Click the Refresh button to update the Tag Tree as you edit the document.

You can click the Collapse button on the Tag Tree toolbar to collapse the selected tag. Note that the tag body must be collapsed in the Tag Tree to collapse it in the document.

The default set of profiles gives you a lot of options for filtering the outline, but you can easily customize profiles. Outline Profiles are written in Allaire's Visual Tools Markup Language (VTML) and are saved in the \Extensions\Outline Profiles folder. You can open any of the profiles in this folder to examine the syntax. The VTML markup identifies the tags that are recognized in the profile.

You can manually edit a profile or create a new one in the editor or use the Outline Profile Editor dialog box. Before making changes to a profile, it's a good idea to make a backup of the original file.

To configure Outline Profiles:

1. Click the Configure Outline Profiles button at the top of the pane to open the Outline Profiles dialog box.
2. Use the Add and Remove buttons in the Outline Profiles pane to edit the current tag sets.
3. Use the Add and Remove buttons in the Recognized Tags pane to edit the tag list for the selected set.
4. To add a caption and tool button to a tag, make selections in the Tag Settings pane.
5. Click Done to update the Tag Tree profiles.

To import an Outline Profile:

1. Click the Import button in the Configure Outline Profiles dialog box.
2. Select either a VTML definition file or a DTD file to import.
3. Click Next.

   The Wizard reports the status of the import process. If the process completes successfully, click Finish. The Import from a DTD file option creates a profile from the language defined in the DTD.

Editing code in the Tag Inspector

The Tag Inspector lets you edit code in a property sheet interface that will be familiar to Visual Basic and Delphi programmers.

Setting the display

Buttons at the top of the Inspector pane control the way attributes and scripting events are displayed.

• Version-specific -- arranges the entries by language and browser version
• Categorized -- arranges by type and browser version
• Alphabetically -- ascending or descending order by name

Selecting the appropriate display can help when awareness of cross-browser and language issues is required.

To use the Tag Inspector:

1. Click in a tag, either in the Tag Tree or in the Editor, to see a list of its attributes.
2. Click an attribute name to type a value or to select from a list if the attribute takes predefined values.
3. Click outside the current field to enter the new value in your code.

Every tag that HomeSite installs includes a definition file, written in VTML, that specifies the valid attributes for that tag and the content and formatting of the tag's editor.

Working with tag definition files

You can change a tag's definition from the Tag Inspector by clicking the Edit Tag Definitions button on the Tag Inspector toolbar and then selecting the tag in the Tag Definitions Library dialog box. This method has limitations, however, and it might cause the tag's editor to not work properly. Be sure to backup the VTM file before making changes.

Similarly, a new tag definition created from the Tag Inspector will not support a tag editor.

The preferred method for changing a tag definition is to edit the VTM file directly using the VTML tag editors.

To edit a tag definition:

1. Open the VTM file from the appropriate language folder in \Extensions\TagDefs.
2. Right-click a tag, and select Edit Tag to change its attributes and values.

This method supports tag editors, Tag Inspector, Tag Insight, and Tag Tips, and also ensures that Large Fonts display properly on user systems.

The best way to create a new tag definition file is modify an existing VTM file and save it with the tag's name. You can also open \Extensions\TagDefs\TagDefTemplate.vtm to work with a skeleton definition file.

Creating and editing event handler script blocks

Adding and modifying script blocks for events such as ONCLICK is easy from the Tag Inspector. You can edit an event if it is supported as an attribute of the selected tag or edit the event directly.

To add an event handler script block:

1. Select a tag in the Tag Tree to display a list of supported attributes and events in the Tag Inspector pane.
2. You can either click the event in the Attributes list or in the Events list.
3. Open the drop-down list in the values column and select a script language for the event handler.
4. In the Specify Event Handler Name dialog box, you can select the default entry or type a new name, and then click OK.

   The event syntax is added to the tag and a script block is created in the HEAD section of the document.

5. Complete the script block for the handler.

To locate an event script block in your document, double-click the name in the Tag Inspector pane or right-click the tag and select the Navigate to "" function command.

Copyright © 2000, Allaire Corporation. All rights reserved.